<template>
	<view class="">
		<view style="margin: 24rpx 0; ">
			<notice :noticeContent="noticeContent" :xTime='17'></notice>
		</view>
		<view class="" style="padding:0 26rpx;">
			<view class="immediate-wrap-card dis">
				<view class="immediate-wrap-card-tag">
					优质用户专享
				</view>
				<view class="immediate-wrap-card-top dis">
					<image :src="pagesInfo.logo" mode=""></image>
					{{pagesInfo.productName}}
				</view>
				<view class="immediate-wrap-card-center dis">

					<view class="immediate-wrap-card-center-left">
						<view class="immediate-wrap-card-center-left-top">额度(元)</view>
						<view class="immediate-wrap-card-center-left-bot">{{pagesInfo.quota}}</view>
					</view>
					<view class="immediate-wrap-card-center-right">
						<view class="immediate-wrap-card-center-right-top">参考年化利率(单利)</view>
						<view class="immediate-wrap-card-center-right-btm">{{minRate}}%-{{maxRate}}%</view>
					</view>
				</view>
				<view class="immediate-wrap-card-bot">
					实际贷款利息及放贷金额以最终审核为准
				</view>
			</view>
		
			<view class="estimate">
				<view class="estimate-list" v-for="(item,index) in estimateLlist">

					<view class="estimate-list-top">{{item.mony}}</view>
					<view class="estimate-list-btom">{{item.tit}}</view>
				</view>
			</view>
			<view class="backAffirm-wrap-list">
				<view class="dis" style="align-items: center;" v-for="(item,index) in backAffirmList" :key="index">
					<!-- :style="{ borderBottom:index+1!==backAffirmList.length?'2px solid rgba(0,0,0,0.09)':'' }" -->
					<view class="dis backAffirm-wrap-list-wrap"
						>
			
						<view class="backAffirm-wrap-list-msg">
								<view class="backAffirm-wrap-list-msg-msg">{{item.msg}}</view>
						</view>
						<view class="backAffirm-wrap-list-tag" v-if="item.status==1">
							<text class="backAffirm-wrap-list-tag-color">
								{{item.msg1}}
							</text>
							
						</view>
			
			
					</view>
			
				</view>
			
			
			</view>
			
			<view class="submit"  @click="sureCLick">同意协议,并激活额度</view>
			
		</view>
		
	</view>
</template>

<script>
	import {apiShopDetail,surePush,clickChannel}from'@/api/index.js'
	import Notice from '@/components/jk-notice/index.vue'
	export default {
		components: {
			Notice

		},
		data() {
			return {
				pagesInfo:{},
				backAffirmList: [{
						status: 1,
						url: '@/static/index/icon_sfz.png',
						msg: '预估利息',
						msg1:''
					},
					{
						status: 1,
						url: '@/static/index/icon_lzxx.png',
						msg: '平台名称',
						msg1:''
					},
					{
						status: 1,
						url: '@/static/index/icon_xycs.png',
						msg: '服务方',
						msg1:''
					},
					{
						status: 1,
						url: '@/static/index/icon_xycs.png',
						msg: '主带机构',
						msg1:''
					}
				],
				estimateLlist: [{
						mony: 0,
						tit: '预估利息'
					},
					{
						mony: 0,
						tit: '预估利息'
					},
					{
						mony: 0,
						tit: '月利率'
					},
					{
						mony: 0,
						tit: '还款期数'
					}
				],
				noticeContent: '请填写真实有效信息',
				id:''
			}
		},
		onLoad(e) {
			this.id=e.id
			this.init()
		},
		methods:{
			async init(){
				let data={
					id:this.id
				}
				let res=await apiShopDetail(data)
				this.pagesInfo=res.data
				this.backAffirmList[3].msg1=this.pagesInfo.platformName||''
				this.backAffirmList[2].msg1=this.pagesInfo.platformProName||''
				this.backAffirmList[1].msg1=this.pagesInfo.accountName||''
				this.backAffirmList[0].msg1=this.pagesInfo.productName||''
				
				this.estimateLlist[3].mony=this.pagesInfo.loanTime||0
				this.estimateLlist[2].mony=this.pagesInfo.monthRate||1
				this.estimateLlist[1].mony=this.pagesInfo.rate||2
				this.estimateLlist[0].mony=this.pagesInfo.loanTime||3
				console.log(res,'斤斤计较')
			},
			async sureCLick(){
				
				// 0 机构
				// 1平台
				let data = {
					id: this.id,
					sure: 1
				}
				
				let res = await surePush(data)
				
				if(res.code==100000){
					let ooData={
						type:9
					}
					let oo=await clickChannel(ooData)
					
				}
				
				if(res){
					uni.navigateTo({
						url:'/pagesC/list/index'
					})
				}
			}
			
		}


	}
</script>

<style lang="scss" scoped>
	.submit{
		margin: 30rpx 0;
		background: linear-gradient( 90deg, #6CB0F2 0%, #3C75F2 100%);
		box-shadow: 0px 4px 15px 2px #B2CBEA;
		border-radius: 100rpx;
		text-align: center;
		color: #fff;
		line-height: 100rpx;
	}
	page{
		background: #F3F4F5;
	}
	.backAffirm-wrap-list {

		
		.backAffirm-wrap-list-wrap {
			width: 95%;
			justify-content: space-between;
			border-bottom: 2rpx solid rgba(0,0,0,0.09);
			align-items: center;

			.backAffirm-wrap-list-tag {
				display: flex;
				align-items: center;

				.backAffirm-wrap-list-tag-color {
					color: #333;
				}

				.backAffirm-wrap-list-tag-color1 {
					color: red;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
					vertical-align: center;
				}
			}
		}

		.backAffirm-wrap-list-msg {
			.backAffirm-wrap-list-msg-img {
				width: 32rpx;
				height: 32rpx;
				vertical-align: center;
			}

			.backAffirm-wrap-list-msg-msg {
				font-size: 30rpx;
				margin-left: 20rpx;
			}

			display: flex;
			align-items: center;
			line-height: 80rpx;
		}

		// width: 80%;
		padding:4rpx 36rpx;
		margin: 26rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 36rpx;
	}

	.estimate {
		background: #E6F2FE;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		text-align: center;
		margin: 20rpx auto;

		.estimate-list {
			.estimate-list-top {
				color: $mian-color;
			}

			// border: 1px solid;
			// margin: 10rpx;
			line-height: 60rpx;
			padding: 20rpx;
		}
	}

	.immediate-wrap-card {
		.immediate-wrap-card-tag {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 28rpx;
			color: $mian-color;
			padding: 20rpx 30rpx;
			border-radius: 0 6px 0 12rpx;
			background: linear-gradient(90deg, #9AC0FE 0%, #DEF3FE 100%);
			box-shadow: 0px 0px 4px 0px rgba(177, 155, 155, 0.25);
		}

		.immediate-wrap-card-bot {
			font-size: 24rpx;
		}

		.immediate-wrap-card-center {
			.immediate-wrap-card-center-right {
				.immediate-wrap-card-center-right-top {
					font-size: 26rpx;
				}

				.immediate-wrap-card-center-right-btm {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: 500;
					font-size: 44rpx;
				}
			}

			.immediate-wrap-card-center-left {
				.immediate-wrap-card-center-left-top {
					font-size: 26rpx;
				}

				.immediate-wrap-card-center-left-bot {
					font-size: 64rpx;
					font-family: DIN Alternate, DIN Alternate;
					font-weight: bold;

				}
			}

			margin: 20rpx 0;
			align-items: center;
			justify-content: space-between;
		}

		.immediate-wrap-card-top {
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
		}

		position: relative;
		flex-direction: column;
		border-radius: 20rpx;
		color: #fff;

		padding: 40rpx;
		justify-content: space-between;
		background: linear-gradient(90deg, #3E77F2 0%, #6BA9F8 100%);
		// background: linear-gradient(270deg, #C4E4FB 0%, #3470EB 100%);

	}

</style>